<template>
    <div class="cm-inner-page activity-page-share-config">
        <div class="cm-back-btn-wrap">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动页面</el-breadcrumb-item>
                <el-breadcrumb-item>分享配置</el-breadcrumb-item>
            </el-breadcrumb>

            <el-button
                class="btn-back"
                type="default"
                @click="goBack">
                返回&nbsp;&gt;&gt;
            </el-button>
        </div>

        <div class="form-wrap">
            <el-form
                ref="form"
                label-width="80px">
                <el-form-item label="活动名称">
                    <span class="lh30px">{{pageTitle}}</span>
                </el-form-item>

                <el-form-item label="封面图">
                    <el-input
                        v-model="faceImgUrl"
                        placeholder="请输入分享封面图url"
                        style="width: 300px;">
                    </el-input>
                    <div class="mt10px cm-text-orange">
                        注意：请控制图片大小不超过128K，长宽比必须为5:4
                    </div>
                    <div class="img-wrap">
                        <img v-if="faceImgUrl" :src="faceImgUrl">

                        <i v-if="!faceImgUrl" class="el-icon-picture"></i>
                        <p v-if="!faceImgUrl" class="cm-text-light">请输入分享封面图url</p>
                    </div>
                </el-form-item>

                <el-form-item label="内容图">
                    <el-input
                        v-model="contentImgUrl"
                        placeholder="请输入分享内容图url"
                        style="width: 300px;">
                    </el-input>
                    <div class="mt10px cm-text-orange">
                        注意：请控制图片大小不超过1M
                    </div>
                    <div class="img-wrap img-wrap-sp"
                         :class="{'has-not-img': !contentImgUrl}">
                        <img v-if="contentImgUrl" :src="contentImgUrl">

                        <i v-if="!contentImgUrl" class="el-icon-picture"></i>
                        <p v-if="!contentImgUrl" class="cm-text-light">请输入分享内容图url</p>
                    </div>
                </el-form-item>
            </el-form>

            <div class="mt20px pb20px text-center">
                <el-button
                    style="width: 80px;"
                    type="primary"
                    @click="handleSave"
                    v-if="pageType != 'detail'">
                    保存
                </el-button>

                <el-button
                    style="width: 80px;"
                    type="default"
                    @click="goBack">
                    返回
                </el-button>
            </div>

            <div style="position: absolute; left: 480px; top: 68px;">
                <img src="../../imgs/preview.png" style="width: 420px; height: 345px;" />
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data () {
            return {
                pageId: '',
                initFlag: false,

                areaName: '',

                pageTitle: '',
                pageBgColor: '#ffffff',
                faceImgUrl: '',
                contentImgUrl: '',
                moduleList: []
            };
        },
        computed: {
            areaData () {
                var obj = {};

                this.$store.state.area.areaList.forEach(function (item) {
                    obj[item.area_id] = item;
                });

                return obj;
            }
        },
        methods: {
            getActivityPageDetail () {
                var _this = this;

                _this.$get({
                    url: '/activityPage/getActivityPageDetail',
                    data: {
                        page_id: _this.pageId
                    },
                    success: function (res) {
                        _this.areaName = _this.areaData[res.data.area_id].area_name;

                        /*
                        *  虽然页面只是更新 faceImgUrl 和 contentImgUrl
                        *  但由于 setting 是整个以 json 字符串方式保存的
                        *  所以其他的一些配置的相关内容处理以及数据缓存也需要做
                        * */
                        if (res.data.setting) {
                            var setting = JSON.parse(res.data.setting);
                            _this.pageTitle = setting.pageTitle;
                            _this.pageBgColor = setting.pageBgColor;
                            // H5活动分享配置需求新增属性
                            _this.faceImgUrl = setting.faceImgUrl || '';
                            _this.contentImgUrl = setting.contentImgUrl || '';

                            _this.moduleList = setting.moduleList.map(function (module) {
                                // 这里为了填坑，要对数据做处理
                                // 1期的孵化器直接通过 moduleType 来指定楼层类型
                                // 2期则改为为各个楼层添加 floorType 属性来指定楼层类型
                                // 以适配多个楼层的时候，可以同时存在不同楼层类型的场景
                                // 所以这里对1期的配置数据做兼容处理，但同时不能影响二期的数据
                                // 只在获取数据的时候做兼容处理，保存的时候则以新的数据结构保存
                                // 这段处理逻辑可在3期酌情注释掉
                                if (module.moduleType == 'floor' || module.moduleType == 'slideFloor') {
                                    // 1期会有 slideFloor 这一种 moduleType，在2期就移除了
                                    module.floorList.forEach(function (floor) {
                                        if (floor.floorType === undefined) {
                                            // moduleType 与 floorType 的对应关系
                                            var obj = {
                                                floor: 'simple',
                                                slideFloor: 'slide'
                                            };
                                            // 如果 floorType 未定义，则说明这是1期的数据，补上 floorType 属性
                                            floor.floorType = obj[module.moduleType];
                                        }
                                        if (floor.titleImgPosition === undefined) {
                                            floor.titleImgPosition = 'top';
                                        }
                                        if (floor.hotAreaBgImg === undefined) {
                                            floor.hotAreaBgImg = '';
                                        }
                                        if (floor.linkList === undefined) {
                                            floor.linkList = [];
                                        }
                                    });
                                }

                                // 继续补全2期新增属性
                                module.moduleWidth = module.moduleWidth !== undefined ? module.moduleWidth : 0;
                                module.moduleHeight = module.moduleHeight !== undefined ? module.moduleHeight : 0;
                                module.topOrBottom = module.topOrBottom !== undefined ? module.topOrBottom : 'top';
                                module.leftOrRight = module.leftOrRight !== undefined ? module.leftOrRight : 'left';
                                module.moduleTop = module.moduleTop !== undefined ? module.moduleTop : 0;
                                module.moduleLeft = module.moduleLeft !== undefined ? module.moduleLeft : 0;
                                module.moduleBottom = module.moduleBottom !== undefined ? module.moduleBottom : 0;
                                module.moduleRight = module.moduleRight !== undefined ? module.moduleRight : 0;
                                module.bannerHotAreaFlag = module.bannerHotAreaFlag !== undefined ? module.bannerHotAreaFlag : false;
                                module.bannerBottomBtnFlag = module.bannerBottomBtnFlag !== undefined ? module.bannerBottomBtnFlag : true;
                                module.bannerSwitchEffect = module.bannerSwitchEffect !== undefined ? module.bannerSwitchEffect : 'slide';

                                module.linkList.forEach(function (link) {
                                    link.modalIndex = link.modalIndex !== undefined ? link.modalIndex : '';
                                    link.targetSmallProgram = link.targetSmallProgram !== undefined ? link.targetSmallProgram : '';
                                });

                                module.bannerList.forEach(function (banner) {
                                    banner.modalIndex = banner.modalIndex !== undefined ? banner.modalIndex : '';
                                    banner.targetSmallProgram = banner.targetSmallProgram !== undefined ? banner.targetSmallProgram : '';
                                });

                                return module;
                            });
                        }

                        _this.$nextTick(function () {
                            _this.initFlag = true;
                        });
                    }
                });
            },

            handleSave () {
                var _this = this;

                _this.$post({
                    url: '/activityPage/update',
                    data: {
                        page_id: _this.pageId,
                        setting: JSON.stringify({
                            pageTitle: _this.pageTitle,
                            pageBgColor: _this.pageBgColor,
                            faceImgUrl: _this.faceImgUrl,
                            contentImgUrl: _this.contentImgUrl,
                            moduleList: _this.moduleList
                        })
                    },
                    success: function (res) {
                        _this.$message.success('保存成功');
                        _this.goBack();
                    }
                });
            },

            goBack () {
                this.$router.go(-1);
            }
        },
        created () {
            var _this = this;
            _this.pageId = _this.$route.params.pageId;
            _this.getActivityPageDetail();

            window.vm = this;
        }
    };
</script>

<style scoped>
    .activity-page-share-config .form-wrap{
        width: 920px;
        margin: 0 auto;
        padding: 10px 0;
        position: relative;
        min-height: 400px;
    }
    .activity-page-share-config .img-wrap{
        text-align: center;
        width: 200px;
        height: 160px;
        border: 1px solid #e2e2e2;
        margin-top: 10px;
        position: relative;
    }
    .activity-page-share-config .img-wrap img{
        width: 100%;
        height: 100%;
    }
    .activity-page-share-config .img-wrap .el-icon-picture{
        color: #999999;
        font-size: 32px;
        margin-top: 35px;
    }
    .activity-page-share-config .img-wrap .el-icon-circle-close{
        position: absolute;
        top: 0;
        right: 0;
        margin: -5px -5px 0 0;
        cursor: pointer;
    }
    .activity-page-share-config .img-wrap-sp{
        width: 200px;
        height: auto;
    }
    .activity-page-share-config .img-wrap-sp img{
        height: auto;
    }
    .activity-page-share-config .img-wrap-sp .el-icon-picture{
        color: #999999;
        font-size: 40px;
        margin-top: 130px;
    }
    .activity-page-share-config .img-wrap-sp.has-not-img{
        min-height: 300px;
    }
</style>
